.amplify-rating {
  display: flex;
  position: relative;
  text-align: left;
  font-size: var(--amplify-components-rating-default-size);
  line-height: var(--amplify-components-rating-default-size);

  &--small {
    font-size: var(--amplify-components-rating-small-size);
    line-height: var(--amplify-components-rating-small-size);
  }

  &--large {
    font-size: var(--amplify-components-rating-large-size);
    line-height: var(--amplify-components-rating-large-size);
  }

  &__item {
    position: relative;
    height: 1em;
    width: 1em;
  }

  &__icon {
    width: 1em;
    height: 1em;
    display: block;
    position: absolute;
    overflow: hidden;

    &--filled {
      color: var(--amplify-components-rating-filled-color);
    }

    &--empty {
      color: var(--amplify-components-rating-empty-color);
    }
  }
}
